1
00:00:00,730 --> 00:00:07,870
حسنًا، والآن بعد أن حصلنا على معاينة مجموعتنا، نحتاج إلى البدء في النظر في إنشاء عنصر القائمة الخاص بنا

2
00:00:07,870 --> 00:00:18,760
المكون حتى نعلم أن مكون عنصر القائمة الخاص بنا سيتكون من صورة بالإضافة إلى عنوان،

3
00:00:19,120 --> 00:00:23,890
السعر، وهذا الزر الذي يسمح لنا بإضافته إلى سلة التسوق.

4
00:00:24,710 --> 00:00:29,620
الآن، لن نقوم بإضافة أي من الوظائف في الوقت الحالي.

5
00:00:29,890 --> 00:00:32,950
لم نفكر حقًا في كيفية التعامل مع عربتنا بعد.

6
00:00:33,730 --> 00:00:37,060
ولكن دعونا نبني هذا المكون أولاً.

7
00:00:37,900 --> 00:00:43,330
لذلك دعونا نضيف عنصر المجموعة إلى مكوناتنا.

8
00:00:44,660 --> 00:00:50,500
وفي المجلد الخاص بنا، سنفعل نفس الشيء الذي كنا نفعله مع مكونات عناصر المجموعة الخاصة بنا

9
00:00:51,830 --> 00:01:02,600
ومن ثم أنماط نقاط مجموعتنا التي تسألنا، كلما كتبت هذا أكثر، كلما حصلت على أفضل

10
00:01:02,600 --> 00:01:02,840
فيه.

11
00:01:03,650 --> 00:01:10,070
والذي دائمًا ما يكون مثيرًا للاهتمام حقًا هو أنه في البداية يبدو دائمًا متكررًا بعض الشيء، ولكن

12
00:01:10,460 --> 00:01:17,570
تجد في الواقع أنك في نهاية المطاف تتذكر كل شيء والغرض منه أكثر

13
00:01:17,570 --> 00:01:22,730
تتدرب على كتابة نفس بنية المجلد لمكوناتك وماذا تفعل بها.

14
00:01:23,380 --> 00:01:26,240
حسنًا، الآن بالنسبة لعنصر مجموعتنا.

15
00:01:26,540 --> 00:01:32,660
نحن نعلم أننا نحتاج إلى أشياء معينة لكي نحظى بشعبية كبيرة في قائمة طعامنا، ولكننا لا نحتاج إليها

16
00:01:32,660 --> 00:01:33,260
أي دولة.

17
00:01:33,620 --> 00:01:36,830
لذلك دعونا نصنع مكونًا وظيفيًا آخر.

18
00:01:37,670 --> 00:01:43,970
لذا فإن عنصر المجموعة CONSED يساوي هذا المكون الوظيفي.

19
00:01:45,520 --> 00:01:48,640
تقوم بإرجاع Divx هذا مع اسم فئتنا.

20
00:01:50,210 --> 00:01:56,150
عنصر المجموعة، وبعد ذلك سنقوم بإعطائه div.

21
00:01:57,190 --> 00:02:04,470
والآن بما أن Divx سيحتفظ بصورتنا، فلنعطيها اسم فئة الصورة في الوقت الحالي.

22
00:02:06,020 --> 00:02:07,190
ودعونا.

23
00:02:08,250 --> 00:02:15,630
افعل نفس الشيء الذي فعلناه من قبل مع عناصر الدليل الخاصة بنا، لذا بدلاً من ذلك نعرف ما سنفعله

24
00:02:15,630 --> 00:02:17,580
لتمرير سيكون.

25
00:02:18,600 --> 00:02:20,550
سوف نحصل أيضا على اسمنا.

26
00:02:21,700 --> 00:02:25,750
سنحصل على السعر وعنوان URL الخاص بالصورة، وسيكون لدينا كل ذلك.

27
00:02:26,820 --> 00:02:34,920
عندما قمنا بإحضار تلك البيانات في وقت سابق من مجموعتنا أو آسف، في صفحة متجرنا، مباشرة في متجرنا

28
00:02:34,920 --> 00:02:39,960
البيانات على وجه التحديد، لذلك نحن بحاجة إلى اسم الهوية والصورة والسعر.

29
00:02:41,880 --> 00:02:44,370
الآن نحن ذاهبون إلى.

30
00:02:46,740 --> 00:02:54,510
ضع ما فعلناه من قبل بأسلوبنا وسنفعل صورة الخلفية تنتقل إلى السلسلة الخاصة بنا

31
00:02:54,510 --> 00:02:57,150
قيمة الاستيفاء.

32
00:02:58,470 --> 00:02:59,950
صورتك يا إيرل.

33
00:03:01,590 --> 00:03:08,930
لذا لا يوجد شيء جديد هنا حتى الآن، وبعد ذلك سنقوم بإضافة فيروس نقص المناعة البشرية آخر وسنضيف هنا

34
00:03:08,940 --> 00:03:10,440
مجموعتنا ل.

35
00:03:11,500 --> 00:03:11,920
الآن.

36
00:03:13,020 --> 00:03:14,190
داخل فوتر لدينا.

37
00:03:15,630 --> 00:03:22,710
لدينا تكرار مزدوج، في الواقع، لا نحتاج حتى إلى علامة الإغلاق هذه، وسنقوم بإحضارها

38
00:03:22,710 --> 00:03:27,960
في نطاقنا، والذي سيكون اسمنا.

39
00:03:29,100 --> 00:03:32,040
وكذلك لدينا.

40
00:03:35,430 --> 00:03:36,000
مذهل.

41
00:03:36,070 --> 00:03:39,530
حسنا، الآن دعونا تصدير هذا.

42
00:03:41,740 --> 00:03:47,140
ودعنا نحضر النجوم التي لدينا لهذا المكون، وقد كتبتها لنا بالفعل،

43
00:03:47,140 --> 00:03:49,900
ولكن يمكننا أن نلقي نظرة سريعة على ما هي عليه.

44
00:03:53,200 --> 00:03:59,150
داخل عنصر مجموعتنا، نقوم بتصميم صورتنا بحيث يكون ارتفاعها خمسة وتسعين بالمائة.

45
00:03:59,950 --> 00:04:05,980
وهذا يعني أن مجموعتنا الخاصة بارتفاع الصور ستكون خمسة بالمائة من إجمالي ارتفاع مجموعتنا

46
00:04:05,980 --> 00:04:08,380
عنصر المجموعة، والذي سيكون 350 بكسل.

47
00:04:09,470 --> 00:04:14,510
لذلك سيكون هذا إلى حد كبير هو التخطيط للمكون الفعلي لدينا، ما نراه هنا.

48
00:04:16,050 --> 00:04:23,760
لذا، أحد الأشياء المهمة التي يجب ملاحظتها هو أن عمود Fleck الموجود في عنصر مجموعتنا سيسمح بذلك بشكل أساسي

49
00:04:23,760 --> 00:04:27,510
لدينا Futter وصورتنا للجلوس في محاذاة عمودية.

50
00:04:27,700 --> 00:04:28,080
يمين.

51
00:04:29,130 --> 00:04:35,250
ومن ثم فإن مجموعتنا، Futter، هي مجرد شاشة العرض المرنة العادية، ومن ثم لدينا بعض المساحة بينهما

52
00:04:35,250 --> 00:04:43,530
بحيث يتم فصل المحتوى الخاص بنا عن بعضه البعض، يشغل عنواننا 90 بالمائة من المساحة الإجمالية لدينا

53
00:04:43,530 --> 00:04:46,340
تذييل الصفحة وبعد ذلك سيكون السعر 10 بالمائة.

54
00:04:46,350 --> 00:04:52,170
لذا، نظرًا لأن أسعارنا ربما لن ترتفع أبدًا إلى هذا الحد، فعلينا أن نتأكد من حصولنا على ما لدينا

55
00:04:52,170 --> 00:04:54,720
يشغل الاسم غالبية المساحة هنا.

56
00:04:56,140 --> 00:04:56,680
نعم.

57
00:04:57,580 --> 00:05:07,600
الآن، إذا قمنا باستيراد عنصر مجموعتنا إلى معاينة مجموعتنا حتى نتمكن من الوصول إليها.

58
00:05:08,760 --> 00:05:10,950
عنصر المجموعة الجديد الذي كتبناه.

59
00:05:15,370 --> 00:05:25,030
يمكننا الآن، بدلاً من القيام بالمهمة، أن نرسم خريطة لها بهذه الطريقة ولأننا بحاجة إلى الخصائص

60
00:05:25,030 --> 00:05:30,220
فيما يتعلق بالعنصر الذي كان لدينا من قبل، سنفعل ما فعلناه سابقًا.

61
00:05:31,410 --> 00:05:37,920
وسنقوم بإعادة هيكلة بطاقة الهوية الخاصة بنا، ولكننا سنقوم أيضًا بإعادة هيكلة بقية العنصر الخاص بنا

62
00:05:37,920 --> 00:05:43,020
الدعائم وتمرير ذلك من خلال مثل ذلك.

63
00:05:44,030 --> 00:05:46,430
دعونا نفعل الدعائم البند الأخرى.

64
00:05:48,280 --> 00:05:48,670
الواب.

65
00:05:49,650 --> 00:05:52,080
والآن لم يعد div.

66
00:05:54,580 --> 00:06:01,480
حسنًا، فقط تأكد من إنشاء هيكل D أو نشر دعائم العناصر الأخرى في عنصر مجموعتنا.

67
00:06:03,460 --> 00:06:06,250
أوه، علينا أيضًا أن نبدأ بمعاينة المجموعة.

68
00:06:08,320 --> 00:06:11,020
إذن هذه الأنماط موجودة هنا.

69
00:06:14,610 --> 00:06:16,250
حسنًا، ها نحن ذا.

70
00:06:17,310 --> 00:06:22,800
لذا، لدينا أسعارنا ولدينا ما لدينا لأنه لا يوجد تصميم، دعنا نتفحصه فقط

71
00:06:22,800 --> 00:06:24,960
بسرعة ومعرفة ما إذا كنا في عداد المفقودين شيئا.

72
00:06:25,380 --> 00:06:31,260
لذا، أثناء قيامك بالبرمجة، قد ترى هذا يحدث، فأنت تريد فقط التأكد من صحة تسميتنا

73
00:06:31,260 --> 00:06:33,150
لكل شيء ونحن نحصل على القلم.

74
00:06:33,870 --> 00:06:37,470
لذلك لا أرى النجوم التي كتبناها مطبقة هنا.

75
00:06:39,210 --> 00:06:45,450
على الرغم من أننا نحصل على الصورة الفعلية هنا والتي يتم عرضها على هذا النحو.

76
00:06:47,700 --> 00:06:52,550
أوه، أرى العرض المسبق لمجموعتنا، عنصر مجموعتنا.

77
00:06:54,070 --> 00:06:55,390
أوه، نحن لم ننقذ.

78
00:06:58,230 --> 00:06:59,130
أخطاء سخيفة.

79
00:06:59,820 --> 00:07:08,100
لذلك، في بعض الأحيان، إذا ألقيت نظرة داخل أدوات التطوير الخاصة بك، فمن السهل جدًا معرفة أين ربما

80
00:07:08,100 --> 00:07:14,760
نحن نسير على نحو خاطئ لأننا نعرف على وجه اليقين أنه بسبب الطريقة التي تم بها إعداد رد الفعل، يجب أن يكون كل شيء

81
00:07:14,760 --> 00:07:16,460
يكون في وقت محدد.

82
00:07:16,470 --> 00:07:20,680
لذا، إذا لم يتم تحميله، فمن المحتمل أننا أفسدنا عملية الاستيراد.

83
00:07:20,700 --> 00:07:22,920
صحيح، والذي فحصناه أولاً.

84
00:07:22,930 --> 00:07:23,210
يمين.

85
00:07:23,220 --> 00:07:27,060
لقد تأكدنا من أننا نقوم باستيراد عنصر المجموعة الصحيح، وهو ما كنا عليه.

86
00:07:27,720 --> 00:07:31,620
ثم تحققنا مما إذا كانت تسمياتنا تشبه أسماء فصولنا.

87
00:07:31,620 --> 00:07:32,070
صحيح.

88
00:07:32,520 --> 00:07:34,650
وهو ما فعلناه.

89
00:07:35,580 --> 00:07:38,190
وبعد ذلك اتضح أننا لم نحفظه.

90
00:07:38,220 --> 00:07:41,580
لذلك فهو خطأ سخيف، ولكن هناك الكثير من تلك الأخطاء.

91
00:07:41,580 --> 00:07:47,010
عندما تصبح مطورًا محترفًا، ستجد في كثير من الأحيان أنك تقوم فقط بعمل ضجيج

92
00:07:47,010 --> 00:07:52,360
اتجه نحو الحائط لمدة 30 دقيقة، لتكتشف أن لديك خطأ مطبعي بسيط.

93
00:07:52,740 --> 00:07:58,440
إنه أمر شائع جدًا، ولكن بهذه الطريقة، أصبح لدينا الآن مكون المجموعة الخاص بنا.

94
00:08:00,220 --> 00:08:06,790
لذا فإن الشيء الوحيد الذي نفتقده هو تأثير التمرير مع زر الإضافة، ولكن يمكننا إضافة ذلك قليلاً

95
00:08:06,790 --> 00:08:12,150
لاحقًا عندما نبني عربة التسوق الخاصة بنا، لأن هذا هو ما سيتم ربط هذه الميزة به.

96
00:08:12,850 --> 00:08:19,810
وشيء آخر قبل أن نلتزم بالكود الخاص بنا، يجب أن نضيف القليل من الحشو على إجمالينا

97
00:08:19,810 --> 00:08:24,090
المشروع بحيث محاذاة أقرب إلى هذا.

98
00:08:24,550 --> 00:08:33,590
لذلك دعونا ننتقل إلى تطبيقنا، نجاح DOT، ودعونا نقوم بحشو 20 بكسل و80 بكسل.

99
00:08:34,240 --> 00:08:38,230
لذلك أريد 20 بكسل في الأعلى والأسفل، ثم 80 بكسل على الجانب.

100
00:08:38,380 --> 00:08:39,160
والآن.

101
00:08:40,100 --> 00:08:41,180
يبدو أقرب.

102
00:08:42,240 --> 00:08:48,600
لذلك قد يكون هذا أكثر قليلًا مما كان لدينا، لذا دعونا نجعل هذه الـ 60 بكسل ربما.

103
00:08:52,320 --> 00:08:52,860
إنه أفضل بكثير.

104
00:08:53,220 --> 00:08:53,790
هذا جيد جدًا.

105
00:08:54,480 --> 00:08:55,600
والآن دعونا نلتزم بالكود الخاص بنا.

106
00:08:56,070 --> 00:08:57,360
دعنا نعود إلى محطتنا.

107
00:08:58,580 --> 00:09:04,740
دعونا نقوم بعمل جيد، دعونا نرى ما علينا أن نلتزم به أولاً.

108
00:09:05,030 --> 00:09:08,750
حسنًا، وبعد ذلك دعونا نلتزم.

109
00:09:10,570 --> 00:09:14,590
تحديث تطبيقنا بصفحة المتجر.

110
00:09:15,870 --> 00:09:21,810
مجموعة ومكون المعاينة ومكون عنصر المجموعة.

111
00:09:23,010 --> 00:09:26,220
والآن دعونا نحصل على دفعة الأصل الرئيسية.

112
00:09:27,930 --> 00:09:29,590
حسنًا، الكود الخاص بنا جاهز.

113
00:09:29,850 --> 00:09:31,050
الآن دعنا ننتقل.